<template>
    <div class="paper-card">
        <div class="paper-card-title">
            <div class="title-text">答题卡</div>
            <ul class="topic-status">
                <li class="done">已答</li>
                <!-- <li class="sign">标记</li> -->
                <!-- <li class="ing">在答</li>
                <li class="no">未答</li> -->
            </ul>
        </div>
        <div class="paper-card-schedule">
            <div class="title">
                <div>答题进度</div>
                <div>{{ getAnswerNum() }} / {{ examStore.paperInfo.questionTotalNum }}</div>
            </div>
            <div class="schedule-icon">
                <el-slider
                    :model-value="getAnswerNum()"
                    disabled
                    :show-tooltip="false"
                    :max="examStore.paperInfo.questionTotalNum"
                />
            </div>
            <div class="sub-title">
                <div>
                    共{{ examStore.paperInfo.questionTotalNum }}道题，满分{{
                        examStore.paperInfo.paperTotalScore
                    }}分
                </div>
                <div>答卷时间：{{ examStore.paperInfo.durationTime }}分钟</div>
            </div>
        </div>
        <div class="overflow-paper" v-if="testCardData && testCardData.length > 0">
            <template v-for="(item, index) in testCardData" :key="index">
                <div class="paper-card-item">
                    <div class="title">{{ getQuestionText(item.eqType) }}</div>
                    <ul class="sheet">
                        <li
                            v-for="(innerItem, innerIndex) in totalList[index]"
                            :key="innerIndex"
                            class="sheet-item"
                            :class="setClassStatus(innerItem)"
                            @click="changeExam(getTestNum(index, innerIndex))"
                        >
                            {{ getTestNum(index, innerIndex) }}
                        </li>
                        <template v-if="item.eqNum % 5 > 0">
                            <li
                                v-for="item in 5 - (item.eqNum % 5)"
                                :key="item"
                                class="sheet-item empty"
                            ></li>
                        </template>
                    </ul>
                </div>
            </template>
        </div>
        <div class="paper-card-footer">
            <el-button
                v-if="!examStore.examFinished"
                type="primary"
                class="submit-paper"
                @click="submitPaper"
            >
                提交试卷
            </el-button>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, watchEffect } from 'vue'
import { useExamStore } from '@/stores/exam'
import { useRoute, useRouter } from 'vue-router'
import { submitAllAnswer, getExamTime } from '@/api/login'
import { getQuestionText } from '@/utils/examData'

const examStore = useExamStore()
const route = useRoute()
const router = useRouter()
let testCardData = ref({})

let examList = examStore.getExamList

let totalNum = ref(0)
let totalList = ref([])

watchEffect(() => {
    if (examStore.getTestCardInfo && examStore.getTestCardInfo.length > 0) {
        testCardData.value = examStore.getTestCardInfo
        testCardData.value.forEach((item) => {
            totalList.value.push(examList.slice(totalNum.value, totalNum.value + item.eqNum))
            totalNum.value += item.eqNum
        })
    }
})

// 获取答题卡题目
function getTestNum(cardIndex, examIndex) {
    let num = 0
    for (let i = 0; i < cardIndex; i++) {
        num += testCardData.value[i].eqNum
    }
    return num + examIndex + 1
}

// 设置答题卡题目状态
function setClassStatus(question) {
    let answer = examStore.getCurrentAnswer(question.eqId)
    if (answer) {
        return 'done'
    } else if (examStore.getCurrentExam.eqId === question.eqId) {
        return 'ing'
    }
}

// 切换题目
function changeExam(index) {
    examStore.currentExamIndex = index - 1
}

// 是否可以提交试卷
let canSubmit = computed(() => {
    let totalNum = examStore.paperInfo.questionTotalNum
    // return totalNum <= getAnswerNum()
    return true
})

function getAnswerNum() {
    let answerObj = examStore.userAnswer
    let doneNum = 0
    for (let i in answerObj) {
        if (answerObj.hasOwnProperty(i)) {
            doneNum++
        }
    }
    return doneNum
}

watchEffect(() => {
    if (examStore.examFinished) {
        submitData()
    }
})

// 拼装提交内容
async function submitData() {
    let sbId = route.query.sbId
    let answerObj = examStore.userAnswer

    let answerList = []

    for (let i in answerObj) {
        if (answerObj.hasOwnProperty(i)) {
            answerList.push({
                eqId: i,
                answer: answerObj[i],
            })
        }
    }

    let submitData = {
        sbId: sbId,
        answerList: answerList,
    }

    console.log('submitData', submitData)

    // 提交答案，回到考试列表
    let res = await submitAllAnswer(submitData)
    if (res.data.code === 0) {
        examStore.examFinished = true
        sessionStorage.removeItem('examLocalData')
        sessionStorage.removeItem('currentExamIndex')
        sessionStorage.removeItem('userAnswer')
    }

    // 页面展示的答题时间
    // let timeRes = await getExamTime()
    // let serverTime = timeRes.data.data
    // let answerStartTime = examStore.paperInfo.answerStartTime
    // let answerTime = Math.floor((serverTime - new Date(answerStartTime).getTime()) / 1000)
    // examStore.answerTime = Math.floor(answerTime / 60) + '分' + (answerTime % 60) + '秒'
}

// 提交试卷
function submitPaper() {
    if (canSubmit.value) {
        ElMessageBox.confirm('交卷成功后，不可修改，请谨慎操作', '确定交卷？', {
            confirmButtonText: '确认提交',
            cancelButtonText: '继续作答',
            type: 'warning',
        }).then(() => {
            examStore.examFinished = true
        })
    } else {
        ElMessage({
            type: 'warning',
            message: '您还有题目未完成，请完成后再提交',
        })
    }
}
</script>

<style lang="less" scoped>
.paper-card {
    position: relative;
    padding: 20px;
    height: 100%;
    overflow: hidden;
    &-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title-text {
            padding-left: 14px;
            border-left: 8px solid #397efd;
            font-weight: 700;
            font-size: 24px;
            color: #333333;
        }
        .topic-status {
            li {
                margin-right: 26px;
                position: relative;
                display: inline-block;
                font-size: 12px;
            }
            li::after {
                position: absolute;
                content: '';
                width: 14px;
                height: 14px;
                right: -20px;
                top: 1px;
                border-radius: 3px;
                border: 1px solid transparent;
            }
            li.done::after {
                background-color: #397efd;
            }
            li.sign::after {
                background-color: #ff8218;
            }
            li.ing::after {
                border: 1px solid #397efd;
            }
            li.no::after {
                border: 1px solid #999999;
            }
        }
    }
    &-schedule {
        margin: 29px 0 26px 0;
        padding: 10px 20px;
        background-color: #f5f9ff;
        .title {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
            font-size: 15px;
            color: #999;
        }
        .schedule-icon {
            ::v-deep(.el-slider) {
                .el-slider__button {
                    width: 12px;
                    height: 12px;
                }
                .el-slider__bar {
                    height: 3px;
                }
                .el-slider__runway {
                    height: 3px;
                }
                .el-slider__button-wrapper {
                    top: -17px;
                }
            }
            ::v-deep(.el-slider__runway.is-disabled .el-slider__bar) {
                background-color: #397efd;
            }
            ::v-deep(.el-slider__runway.is-disabled .el-slider__button) {
                border-color: #397efd;
                cursor: default !important;
            }
            ::v-deep(.el-slider__button-wrapper:hover) {
                cursor: default !important;
            }
        }
        .sub-title {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            color: #999999;
        }
    }
    .overflow-paper {
        overflow-y: auto;
        height: calc(100% - 255px);
        .paper-card-item {
            width: 286px;
            .title {
                margin-bottom: 20px;
                font-weight: bold;
                font-size: 18px;
            }
            .sheet {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                &-item {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-bottom: 20px;
                    width: 36px;
                    height: 36px;
                    border-radius: 2px;
                    border: 1px solid #999999;
                    cursor: pointer;
                }
                &-item.empty {
                    width: 36px;
                    border: 1px solid transparent;
                    height: 36px;
                }
                &-item:not(:nth-child(5n)) {
                    margin-right: 25px;
                }
                .done {
                    background-color: #397efd;
                    border-color: #397efd;
                    color: #fff;
                }
                .sign {
                    background-color: #ff8218;
                    border-color: #ff8218;
                    color: #fff;
                }
                .ing {
                    border: 1px solid #397efd;
                }
            }
            // .sheet::after {
            //     content: '';
            //     flex: auto;
            // }
        }
    }

    &-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100px;
        background: #fff;
        border-top: 1px solid #d8d8d8;
        .submit-paper {
            width: 180px;
            height: 54px;
        }
    }
}
</style>
